<template>
  <div class="q-pa-md">
    <div class="q-gutter-y-md" style="max-width: 600px">
      <q-card>
        <q-tabs
          v-model="tab"
          dense
          class="bg-grey-3 text-grey-7"
          active-color="primary"
          indicator-color="purple"
          align="justify"
        >
          <q-tab name="foot" label="步行" />
          <q-tab name="ride" label="骑自行车" />
          <q-tab name="car" label="驾车" />
        </q-tabs>

        <q-tab-panels v-model="tab" animated class="bg-primary text-white">
          <q-tab-panel name="foot">

            <q-card class="my-card">
              <q-card-section class="bg-primary text-white">
                <div v-for="(item, index) in roadStore.properties" :key="index">
                  <div class="text-h6">{{item.turntype+'走'+item.distance+'米'}}</div>
                </div>
              </q-card-section>
              <q-separator />
            </q-card>
          </q-tab-panel>
          <q-tab-panel name="ride">
            <div class="text-h6">骑自行车</div>
<!--            <div v-for="(item, index) in roadStore.properties" :key="index" v-if="roadStore.type === 'ride'">-->
<!--              <div class="text-h6">{{item.distance}}</div>-->
<!--              <div class="text-h6">{{item.turntype}}</div>-->
<!--              <br/>-->
<!--            </div>-->
          </q-tab-panel>

          <q-tab-panel name="car">
            <div class="text-h6">驾车</div>
<!--            <div v-for="(item, index) in roadStore.properties" :key="index" v-if="roadStore.type === 'car'">-->
<!--              <div class="text-h6">{{item.distance}}</div>-->
<!--              <div class="text-h6">{{item.turntype}}</div>-->
<!--              <br/>-->
<!--            </div>-->
          </q-tab-panel>
        </q-tab-panels>
      </q-card>
    </div>
  </div>
</template>

<script setup>
import {ref, watchEffect } from 'vue'
import {ElMessage} from 'element-plus'
import {useRoadStore} from "stores/road.js";
let roadStore = useRoadStore()
let tab=ref(roadStore.type)
let changeTabName={
  foot: '步行',
  ride: '骑自行车',
  car: '驾车'
}

watchEffect(() => {
  ElMessage.success({
    message: '出行方式切换为： ' + changeTabName[tab.value],
    type: 'success',
    duration: 1000
  })
  roadStore.type=tab.value
})


</script>
<style lang="sass" scoped>
.my-card
  width: 100%
  max-width: 250px
</style>
